import React from 'react';
import { message, Tooltip } from 'antd';
import ReceiveReportList from './list';
import CommonListsIndex from '../../../../components/CommonLists/index';
import { connect } from 'react-redux';
import services from '../../../../services/api';

@connect(mapStateToProps)
class ReceiveReport extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'dataReport';
    this.listsComponent = ReceiveReportList;
    this.state = {
      ...this.state,
      riskTypes: [],
    };
  }
  componentDidMount() {
    this.queryList();
    this.getAppCodeList();
    this.getProductCodeList();
    this.getRiskTypeList();
  }

  // 获取接收列表
  queryList = async (params) => {
    const { code, data, msg } = await services.dataReport.receiveList(params);
    if (code) return message.error(msg);
    this.setState((prevState) => ({ ...prevState, ...data }));
  };

  // 获取风险类型列表
  getRiskTypeList = () => {
    services.policy.riskTypeList().then((res) => {
      if (res.code === 0) {
        this.setState({
          riskTypes: res.data,
        });
      }
    });
  };

  getColumns = () => {
    return [
      {
        title: '报告名称',
        key: 'report_name',
        dataIndex: 'report_name',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '发送时间',
        key: 'send_time',
        dataIndex: 'send_time',
        render: (text, { send_period_type_name, send_date_name }) => {
          const tempText = send_period_type_name + send_date_name + text;
          return (
            <Tooltip title={tempText} placement='topLeft'>
              <div className='overflowtext'>{tempText}</div>
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '所属渠道',
              this.state.applications,
              'app_id',
              this.refreshTableFilterWithAppV2.bind(this, 'app_id'),
              ['app_id', 'app_name']
            )}
          </>
        ),
        key: 'app_name',
        dataIndex: 'app_name',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '关联产品',
              this.state.products,
              'product_id',
              this.refreshTableFilterWithAppV2.bind(this, 'product_id'),
              ['product_id', 'product_name']
            )}
          </>
        ),
        key: 'product_name',
        dataIndex: 'product_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '关联事件',
              this.state.events,
              'event_id',
              this.refreshTableFilterWithAppV2.bind(this, 'event_id'),
              ['event_id', 'event_name']
            )}
          </>
        ),
        key: 'event_name',
        dataIndex: 'event_name',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('风险类型', this.state.riskTypes, 'risk_type_id', this.refreshTableFilter, [
              'id',
              'name',
            ])}
          </>
        ),
        dataIndex: 'risk_type_name',
        ellipsis: true,
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: (
          <>
            {this.props.data_report_send_type &&
              this.getFilterTitle(
                '接收方式',
                this.props.data_report_send_type,
                'receive_type',
                this.refreshTableFilter,
                ['key', 'value']
              )}
          </>
        ),
        dataIndex: 'receive_type',
        key: 'receive_type',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '报告说明',
        dataIndex: 'remark',
        key: 'remark',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '创建人/修改人',
        dataIndex: 'create_user_name',
        key: 'create_user_name',
        render: (text, { update_user_name }) => (
          <Tooltip title={`${text}/${update_user_name}`} placement='topLeft'>
            <div className='overflowtext'>{`${text}/${update_user_name}`}</div>
          </Tooltip>
        ),
      },
      {
        title: '修改时间',
        key: 'update_time',
        dataIndex: 'update_time',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;
    return (
      <div className='inner-content' style={{ marginTop: '10px' }}>
        <ListsComponent
          {...this.state}
          mediator={this}
          showDetail={this.showDetail}
          onChangePagination={this.onChangePagination}
          queryList={this.queryList}
          columns={this.getColumns()}
          rowKey='id'
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    data_report_send_type: state.code.data_report_send_type,
  };
}

export default ReceiveReport;
